import { useEffect, useState } from "react";

function MyComponents() {
  const [count, setCount] = useState(0);
const [color,setColor]=useState('red')
  function increment() {
    setCount((c) => c + 1);
  }
  function decrement() {
    setCount((c) => c - 1);
  }
  function guiling() {
    setCount(0);
  }
  function changeColor() {
    setColor(color=='red'?'green':'red');
  }
  useEffect(()=>{
    console.log('count',count,'color',color)
    // 只log一次以及count变化时候打印  因为颜色变化而执行
  },[count,color])
  useEffect(()=>{
    console.log('count',count,'color',color)
    // 只log一次以及count变化时候打印   color没写入 不会因为颜色变化而执行
  },[count])
  // useEffect(()=>{
  //   console.log('count',count,'color',color)
  //   // 只log一次以及count变化时候打印
  // },[count])
  // useEffect(()=>{
  //   console.log('count',count)
  //   // 只log一次
  // },[])
  // useEffect(()=>{
  //   console.log('count',count)
  // })
  return (
    <div className="counter">
      <p className="text" style={{color:color}}>{count}</p>
      <button className="add" onClick={increment}>
        加一
      </button>
      <button className="add" onClick={guiling}>
        归零
      </button>
      <button className="add" onClick={decrement}>
        减一
      </button>
      <button className="add" onClick={changeColor}>修改颜色</button>
    </div>
  );
}
export default MyComponents;
